<template>
  <router-view v-slot="{ Component }">
    <transition>
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<script>
export default {
  name: "App",
}
</script>

<style>
@import url("@/css/common.css");
/* @import url("@/css/iconfont.css"); */
body {
  background: #f7f7f7;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

.left-slide-enter,
.right-slide-leave-to {
  opacity: 0;
  transform: translateX(100%);
}
.left-slide-leave-to,
.right-slide-enter {
  opacity: 0;
  transform: translateX(-100%);
}
.left-slide-enter-active,
.left-slide-leave-active,
.right-slide-enter-active,
.right-slide-leave-active {
  transition: opacity ease 0.9s, transform ease 0.9s;
}
</style>
